<template>
	<view style="height:100vh">
		<layout>
			<view class="container">
			  <!-- 搜索面板 -->
			  <scroll-view class="search-panel" scroll-y>
			    <view class="search-item">
			      <text class="label">设备名称</text>
			      <input v-model="searchParams.name" placeholder="请输入名称" class="input" />
			    </view>
			
			    <view class="search-item">
			      <text class="label">设备编码</text>
			      <input v-model="searchParams.code" placeholder="请输入编码" class="input" />
			    </view>
			
			    <view class="search-item">
			      <text class="label">设备型号</text>
			      <input v-model="searchParams.model" placeholder="请输入型号" class="input" />
			    </view>
			
			    <view class="search-item">
			      <text class="label">生产日期</text>
			      <picker 
			        mode="date" 
			        :value="searchParams.productionDate"
			        @change="dateChange"
			        class="date-picker"
			      >
			        <view class="picker-text">
			          {{ searchParams.productionDate || '选择日期' }}
			        </view>
			      </picker>
			    </view>
			
			    <view class="search-item">
			      <text class="label">生产批号</text>
			      <input v-model="searchParams.batch" placeholder="请输入批号" class="input" />
			    </view>
			
			    <view class="search-item">
			      <text class="label">制造商</text>
			      <input v-model="searchParams.manufacturer" placeholder="请输入厂商" class="input" />
			    </view>
			
			    <view class="search-item">
			      <text class="label">设备状态</text>
			      <picker 
			        :range="statusOptions"
			        range-key="label"
			        @change="statusChange"
			        class="status-picker"
			      >
			        <view class="picker-text">
			          {{ statusOptions[statusIndex].label }}
			        </view>
			      </picker>
			    </view>
			  </scroll-view>
				
				
			  <!-- 搜索操作按钮 -->
			  <view class="action-buttons">
			    <view class="button reset" @tap="handleReset">重置</view>
			    <view class="button search" @tap="handleSearch">立即搜索</view>
			  </view>
				
				<!-- 头部操作区 -->
				<view class="header-actions">
				  <view class="button add" @tap="handleAdd">新增设备</view>
				</view>
			  <!-- 设备列表 -->
			  <view class="result-list">
			    <view v-for="item in filteredData" :key="item.id" class="result-item">
			      <view class="item-header">
			        <text class="name">{{ item.name }} - {{ item.model }}</text>
			        <view :class="['status', statusMap[item.status]?.class]">
			          {{ statusMap[item.status]?.label }}
			        </view>
			      </view>
			
			      <view class="item-row">
			        <text class="item-label">设备编号</text>
			        <text class="item-value">{{ item.id }}</text>
			      </view>
			      <view class="item-row">
			        <text class="item-label">设备编码</text>
			        <text class="item-value">{{ item.code }}</text>
			      </view>
			      <view class="item-row">
			        <text class="item-label">生产日期</text>
			        <text class="item-value">{{ item.productionDate }}</text>
			      </view>
			      <view class="item-row">
			        <text class="item-label">生产批号</text>
			        <text class="item-value">{{ item.batchNumber }}</text>
			      </view>
			      <view class="item-row">
			        <text class="item-label">制造商</text>
			        <text class="item-value">{{ item.manufacturer }}</text>
			      </view>
			
			      <view class="card-actions">
			        <view class="action-btn edit" @tap="handleEdit(item)">修改</view>
			        <view class="action-btn delete" @tap="handleDelete(item)">删除</view>
			      </view>
			    </view>
			  </view>
			
			  <!-- 编辑弹窗 -->
			  <uni-popup ref="formPopup" type="dialog">
			    <view class="popup-content">
			      <text class="popup-title">{{ mode === 'add' ? '新增设备' : '编辑设备' }}</text>
			      
			      <view class="form-item">
			        <text class="form-label">名称</text>
			        <input v-model="formState.name" class="form-input" />
			      </view>
			      <view class="form-item">
			        <text class="form-label">编码</text>
			        <input v-model="formState.code" class="form-input" />
			      </view>
			      <view class="form-item">
			        <text class="form-label">型号</text>
			        <input v-model="formState.model" class="form-input" />
			      </view>
			      <view class="form-item">
			        <text class="form-label">生产日期</text>
			        <picker 
			          mode="date" 
			          :value="formState.productionDate"
			          @change="formDateChange"
			        >
			          <view class="picker-text">
			            {{ formState.productionDate || '选择日期' }}
			          </view>
			        </picker>
			      </view>
			      <view class="form-item">
			        <text class="form-label">生产批号</text>
			        <input v-model="formState.batchNumber" class="form-input" />
			      </view>
			      <view class="form-item">
			        <text class="form-label">制造商</text>
			        <input v-model="formState.manufacturer" class="form-input" />
			      </view>
			
			      <view class="popup-buttons">
			        <view class="btn cancel" @tap="handleCancel">取消</view>
			        <view class="btn confirm" @tap="handleConfirm">确定</view>
			      </view>
			    </view>
			  </uni-popup>
			</view>
		</layout>
	</view>
 
</template>

<script setup>
import { reactive, ref, computed } from 'vue';

// 状态配置
const statusOptions = [
  { label: '全部状态', value: null },
  { label: '正常使用', value: 1 },
  { label: '设备停用', value: 2 },
  { label: '维护中', value: 3 },
  { label: '已报废', value: 4 }
];
const statusIndex = ref(0);
const statusMap = {
  1: { label: '正常', class: 'normal' },
  2: { label: '停用', class: 'disabled' },
  3: { label: '维护', class: 'maintain' },
  4: { label: '报废', class: 'scrap' }
};

// 搜索参数
const searchParams = reactive({
  name: '',
  code: '',
  model: '',
  productionDate: '',
  batch: '',
  manufacturer: '',
  status: null
});

// 设备数据
const items = ref([
  {
    id: '001',
    name: '智能传感器A1',
    code: 'SN2023-001',
    model: 'IS-2000',
    productionDate: '2023-03-15',
    batchNumber: 'BATCH2303',
    manufacturer: '深圳科技',
    status: 1
  }
]);

// 弹窗相关
const formPopup = ref(null);
const mode = ref('add');
const currentItem = ref(null);
const formState = reactive({
  name: '',
  code: '',
  model: '',
  productionDate: '',
  batchNumber: '',
  manufacturer: ''
});

// 日期选择处理
const dateChange = (e) => {
  searchParams.productionDate = e.detail.value;
};

// 状态选择处理
const statusChange = (e) => {
  statusIndex.value = e.detail.value;
  searchParams.status = statusOptions[e.detail.value].value;
};

// 搜索处理
const handleSearch = () => {
  // 过滤逻辑在computed中自动处理
};

// 重置处理
const handleReset = () => {
  Object.assign(searchParams, {
    name: '',
    code: '',
    model: '',
    productionDate: '',
    batch: '',
    manufacturer: '',
    status: null
  });
  statusIndex.value = 0;
};

// 过滤逻辑
const filteredData = computed(() => {
  return items.value.filter(item => {
    return Object.entries(searchParams).every(([key, value]) => {
      if (!value && key !== 'status') return true;
      if (key === 'status') {
        if (!value) return true;
        return item.status === value;
      }
      return String(item[key]).toLowerCase().includes(value.toLowerCase());
    });
  });
});

// 新增设备
const handleAdd = () => {
  mode.value = 'add';
  Object.keys(formState).forEach(key => formState[key] = '');
  formPopup.value.open();
};

// 编辑设备
const handleEdit = (item) => {
  mode.value = 'edit';
  currentItem.value = item;
  Object.assign(formState, item);
  formPopup.value.open();
};

// 删除设备
const handleDelete = (item) => {
  items.value = items.value.filter(i => i.id !== item.id);
};

// 表单日期选择
const formDateChange = (e) => {
  formState.productionDate = e.detail.value;
};

// 确认提交
const handleConfirm = () => {
  if (mode.value === 'add') {
    items.value.push({
      ...formState,
      id: Date.now().toString()
    });
  } else {
    const index = items.value.findIndex(i => i.id === currentItem.value.id);
    items.value[index] = { ...formState, id: currentItem.value.id };
  }
  formPopup.value.close();
};

// 取消操作
const handleCancel = () => {
  formPopup.value.close();
};
</script>

<style scoped>
/* 碳中和主题色调 */
:root {
  --primary-color: #27ae60;
  --primary-light: #2ecc71;
  --primary-dark: #219654;
  --secondary-color: #3498db;
  --accent-color: #16a085;
  --background-light: #f6fbf8;
  --background-medium: #e8f5f0;
  --text-primary: #2c3e50;
  --text-secondary: #4a6572;
  --border-color: rgba(39, 174, 96, 0.1);
  --shadow-color: rgba(39, 174, 96, 0.12);
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --danger-color: #e74c3c;
  --info-color: #3498db;
}

/* 全局容器设置 */
.container {
  min-height: 100vh;
  padding: 24rpx;
  background: linear-gradient(165deg, #f6fbf8, #e8f5f0);
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

/* 搜索面板 */
.search-panel {
  background: linear-gradient(145deg, #ffffff, #f9fafb);
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 8rpx 20rpx rgba(39, 174, 96, 0.08);
  max-height: 320rpx;
  animation: fadeIn 0.5s ease forwards;
}

.search-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label {
  width: 160rpx;
  font-size: 28rpx;
  color: var(--text-secondary);
  font-weight: 500;
}

.input {
  flex: 1;
  background-color: #f6fbf8;
  border: 1px solid rgba(39, 174, 96, 0.1);
  border-radius: 10rpx;
  padding: 16rpx 20rpx;
  font-size: 28rpx;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.input:focus {
  border-color: #27ae60;
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1);
}

.date-picker, .status-picker {
  flex: 1;
  background-color: #f6fbf8;
  border: 1px solid rgba(39, 174, 96, 0.1);
  border-radius: 10rpx;
  padding: 16rpx 20rpx;
  transition: all 0.3s ease;
}

.picker-text {
  font-size: 28rpx;
  color: var(--text-primary);
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 20rpx;
  padding: 10rpx 0;
}

.button {
  height: 80rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 500;
  padding: 0 30rpx;
  transition: all 0.3s ease;
}

.reset {
  background-color: #f9fafb;
  color: #4a6572;
  border: 1px solid rgba(39, 174, 96, 0.1);
  flex: 1;
}

.search {
  background: linear-gradient(145deg, #27ae60, #2ecc71);
  color: white;
  border: none;
  box-shadow: 0 4rpx 8rpx rgba(39, 174, 96, 0.2);
  flex: 2;
}

.add {
  background: linear-gradient(145deg, #3498db, #2980b9);
  color: white;
  border: none;
  box-shadow: 0 4rpx 8rpx rgba(52, 152, 219, 0.2);
}

.reset:active, .add:active, .search:active {
  transform: translateY(2rpx);
}

.search:active {
  background: linear-gradient(145deg, #219654, #25a65c);
}

.add:active {
  background: linear-gradient(145deg, #2980b9, #2472a4);
}

/* 头部操作区 */
.header-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16rpx;
}

/* 结果列表 */
.result-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding-bottom: 24rpx;
}

.result-item {
  background: linear-gradient(145deg, #ffffff, #f9fafb);
  border-radius: 20rpx;
  padding: 24rpx;
  border: 1px solid rgba(39, 174, 96, 0.08);
  box-shadow: 0 8rpx 20rpx rgba(39, 174, 96, 0.08);
  animation: slideIn 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20rpx);
}

.result-item:nth-child(1) { animation-delay: 0.05s; }
.result-item:nth-child(2) { animation-delay: 0.1s; }
.result-item:nth-child(3) { animation-delay: 0.15s; }
.result-item:nth-child(4) { animation-delay: 0.2s; }
.result-item:nth-child(5) { animation-delay: 0.25s; }
.result-item:nth-child(6) { animation-delay: 0.3s; }

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 1px solid rgba(39, 174, 96, 0.05);
}

.name {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.status {
  padding: 6rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: white;
  font-weight: 500;
}

.normal {
  background-color: #27ae60;
}

.disabled {
  background-color: #7f8c8d;
}

.maintain {
  background-color: #f39c12;
}

.scrap {
  background-color: #e74c3c;
}

.item-row {
  display: flex;
  margin-bottom: 12rpx;
}

.item-label {
  width: 140rpx;
  font-size: 26rpx;
  color: var(--text-secondary);
}

.item-value {
  flex: 1;
  font-size: 26rpx;
  color: var(--text-primary);
  font-weight: 500;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1px solid rgba(39, 174, 96, 0.05);
}

.action-btn {
  padding: 10rpx 24rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  transition: all 0.3s ease;
}

.edit {
  background-color: rgba(39, 174, 96, 0.1);
  color: #27ae60;
}

.delete {
  background-color: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

.edit:active {
  background-color: rgba(39, 174, 96, 0.2);
}

.delete:active {
  background-color: rgba(231, 76, 60, 0.2);
}

/* 弹窗样式 */
.popup-content {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  width: 600rpx;
  max-width: 90vw;
}

.popup-title {
  font-size: 34rpx;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 30rpx;
  position: relative;
}

.popup-title::after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #27ae60;
  border-radius: 2rpx;
}

.form-item {
  margin-bottom: 24rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: var(--text-secondary);
  margin-bottom: 10rpx;
}

.form-input {
  width: 100%;
  background-color: #f6fbf8;
  border: 1px solid rgba(39, 174, 96, 0.1);
  border-radius: 10rpx;
  padding: 16rpx 20rpx;
  font-size: 28rpx;
  color: var(--text-primary);
}

.popup-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
}

.btn {
  flex: 1;
  height: 80rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.3s ease;
}

.cancel {
  background-color: #f6fbf8;
  color: #4a6572;
  border: 1px solid rgba(39, 174, 96, 0.1);
}

.confirm {
  background: linear-gradient(145deg, #27ae60, #2ecc71);
  color: white;
  box-shadow: 0 4rpx 8rpx rgba(39, 174, 96, 0.2);
}

.cancel:active {
  background-color: #e8f5f0;
}

.confirm:active {
  background: linear-gradient(145deg, #219654, #25a65c);
  transform: translateY(2rpx);
}

/* 动画定义 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .label {
    width: 100%;
    margin-bottom: 10rpx;
  }
  
  .input, .date-picker, .status-picker {
    width: 100%;
  }
}
</style>